<template>
	<div class="rescheduling">
		<!-- 变更说明 -->
		<el-card class="event-card">
			<div style="font-weight:bold;">
				变更事件说明
			</div>
			<div>
				<el-tag type="warning" style="margin-right:8px;">订单变更</el-tag>
				订单 <b>{{ changeEvent.orderNo }}</b> 生产批次变更，触发调度重排，影响任务与资源如下：
			</div>
			<ul style="margin:8px 0 0 20px;padding:0;">
				<li v-for="t in changeEvent.affectedTasks" :key="t">{{ t }}</li>
			</ul>
		</el-card>

		<!-- 前后方案对比 -->
		<el-row :gutter="16" style="margin:20px 0;">
			<el-col :xs="24" :sm="12">
				<el-card>
					<div style="font-weight:bold;">变更前方案</div>
					<el-table :data="planBefore" border size="small">
						<el-table-column prop="task" label="任务" />
						<el-table-column prop="resource" label="资源" />
						<el-table-column prop="start" label="开始" />
						<el-table-column prop="end" label="结束" />
					</el-table>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="12">
				<el-card>
					<div style="font-weight:bold;">变更后方案</div>
					<el-table :data="planAfter" border size="small">
						<el-table-column prop="task" label="任务" />
						<el-table-column prop="resource" label="资源" />
						<el-table-column prop="start" label="开始" />
						<el-table-column prop="end" label="结束" />
					</el-table>
				</el-card>
			</el-col>
		</el-row>

		<!-- 最新甘特图 -->
		<el-card>
			<div style="font-weight:bold;margin-bottom:10px;">最新调度甘特图（重排后）</div>
			<div ref="ganttRef" style="width:100%;min-width:680px;height:320px;"></div>
		</el-card>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 变更事件模拟
const changeEvent = {
	orderNo: 'ORD-20240609-01',
	affectedTasks: ['阿莫西林包装', '头孢曲松分装', '成品入库']
}

// 变更前任务分配
const planBefore = [
	{ task: '阿莫西林包装', resource: '灌装机B', start: '2024-06-10', end: '2024-06-13' },
	{ task: '头孢曲松分装', resource: '压片机A', start: '2024-06-11', end: '2024-06-13' },
	{ task: '成品入库', resource: '库管组', start: '2024-06-14', end: '2024-06-15' }
]

// 变更后任务分配
const planAfter = [
	{ task: '阿莫西林包装', resource: '灌装机B', start: '2024-06-11', end: '2024-06-14' },
	{ task: '头孢曲松分装', resource: '压片机A', start: '2024-06-12', end: '2024-06-14' },
	{ task: '成品入库', resource: '库管组', start: '2024-06-15', end: '2024-06-16' }
]

// 甘特图只展示变更后方案
const ganttTasks = [
	{ name: '阿莫西林包装', resource: '灌装机B', start: '2024-06-11', end: '2024-06-14', color: '#409EFF' },
	{ name: '头孢曲松分装', resource: '压片机A', start: '2024-06-12', end: '2024-06-14', color: '#67C23A' },
	{ name: '成品入库', resource: '库管组', start: '2024-06-15', end: '2024-06-16', color: '#E6A23C' }
]

// 日期序列
function getDateRange(start, end) {
	const res = []
	let dt = new Date(start)
	const ed = new Date(end)
	while (dt <= ed) {
		res.push(dt.toISOString().slice(0, 10))
		dt.setDate(dt.getDate() + 1)
	}
	return res
}
const xDates = getDateRange('2024-06-10', '2024-06-16')

// 渲染甘特图
const ganttRef = ref()
let chart
function renderGantt() {
	if (!chart && ganttRef.value) chart = echarts.init(ganttRef.value)
	if (!chart) return

	chart.setOption({
		tooltip: {
			formatter: params => {
				const d = ganttTasks[params.dataIndex]
				return `${d.name}<br/>${d.resource}<br/>${d.start} ~ ${d.end}`
			}
		},
		grid: { left: 40, right: 20, top: 40, bottom: 36, containLabel: true },
		xAxis: {
			type: 'category',
			data: xDates,
			axisLabel: { rotate: 22 }
		},
		yAxis: {
			type: 'category',
			data: ganttTasks.map(t => t.name),
			inverse: true
		},
		series: [{
			type: 'custom',
			renderItem: (params, api) => {
				const task = ganttTasks[params.dataIndex]
				const start = xDates.indexOf(task.start)
				const end = xDates.indexOf(task.end)
				const y = api.coord([0, params.dataIndex])[1]
				const xStart = api.coord([start, params.dataIndex])[0]
				const xEnd = api.coord([end + 1, params.dataIndex])[0]
				const height = 18
				return {
					type: 'rect',
					shape: {
						x: xStart,
						y: y - height / 2,
						width: xEnd - xStart,
						height
					},
					style: api.style({
						fill: task.color,
						stroke: '#fff'
					}),
					textContent: {
						type: 'text',
						style: {
							text: task.resource,
							x: (xStart + xEnd) / 2, // 居中
							y: y + 1,
							font: 'bold 13px sans-serif',
							fill: ['#409EFF', '#67C23A', '#E6A23C', '#909399', '#36CFC9'].includes(task.color) ? '#fff' : '#333',
							verticalAlign: 'middle',
							textAlign: 'center'
						}
					},
					textConfig: {
						position: 'inside'
					}
				}
			},
			encode: { x: [0, 1], y: 0 },
			data: ganttTasks.map((t, i) => i)
		}]
	})
}

onMounted(() => {
	setTimeout(renderGantt, 20)
})
</script>

<style scoped>
.rescheduling {
	padding: 16px;
}

.event-card {
	margin-bottom: 18px;
}
</style>
  
